<template>
  <div class="dashboard-container">
    <div class="header">
      <h1>数据分析仪表板</h1>
      <div class="date-picker">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
      </div>
    </div>
    
    <div class="cards-container">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(card, index) in cardData" :key="index">
          <el-card class="data-card" :body-style="{ padding: '20px' }">
            <div class="card-content">
              <div class="card-icon" :style="{ background: card.color }">
                <i :class="card.icon"></i>
              </div>
              <div class="card-info">
                <div class="card-title">{{ card.title }}</div>
                <div class="card-value">{{ card.value }}</div>
                <div class="card-trend" :class="card.trend > 0 ? 'up' : 'down'">
                  {{ Math.abs(card.trend) }}% 
                  <i :class="card.trend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="charts-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <div class="chart-wrapper">
              <pie-echarts :chartData="pieData" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div class="chart-wrapper">
              <transverse-line-echart :chartData="lineData" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PieEcharts from '@/components/Echart/pieEcharts.vue'
import TransverseLineEchart from '@/components/Echart/transverseLineEchart.vue'

export default {
  name: 'Dashboard',
  components: {
    PieEcharts,
    TransverseLineEchart
  },
  data() {
    return {
      dateRange: [],
      cardData: [
        {
          title: '总学生数',
          value: '2,345',
          trend: 12.5,
          icon: 'el-icon-user',
          color: '#409EFF'
        },
        {
          title: '平均分',
          value: '85.6',
          trend: 3.2,
          icon: 'el-icon-data-line',
          color: '#67C23A'
        },
        {
          title: '及格率',
          value: '94%',
          trend: -2.1,
          icon: 'el-icon-pie-chart',
          color: '#E6A23C'
        },
        {
          title: '优秀率',
          value: '45%',
          trend: 5.6,
          icon: 'el-icon-trophy',
          color: '#F56C6C'
        }
      ],
      pieData: {
        // 饼图数据配置
      },
      lineData: {
        // 折线图数据配置
      }
    }
  },
  methods: {
    handleDateChange(val) {
      // 处理日期变化
      console.log('日期范围变化:', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h1 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .cards-container {
    margin-bottom: 20px;
    
    .data-card {
      .card-content {
        display: flex;
        align-items: center;
        
        .card-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
          i {
            font-size: 24px;
            color: #fff;
          }
        }
        
        .card-info {
          flex: 1;
          
          .card-title {
            font-size: 14px;
            color: #909399;
            margin-bottom: 8px;
          }
          
          .card-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 8px;
          }
          
          .card-trend {
            font-size: 12px;
            
            &.up {
              color: #67C23A;
            }
            
            &.down {
              color: #F56C6C;
            }
          }
        }
      }
    }
  }

  .charts-container {
    .chart-wrapper {
      height: 400px;
      padding: 20px;
    }
  }
}
</style> 